<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>层次选择器</title>
  <style>
    /* 层次选择器
      E   F  : 后代选择器， E元素内包含的F元素
      E > F  : 子选择器， E元素的子F元素
      E + F  : 兄弟选择器， 和E 同级的F元素
      E ~ F  : 通用选择器，E后的所有的F元素
     */
    * {
      padding: 0;
      margin: 0;
    }

    div {
      border: red solid 1px;
      padding: 5px;
      margin: 5px;
    }

    body {
      width: 300px;
      margin: 0 auto;
    }

    div div {
      background-color: orange;
    }

    body > div {
      background-color: green;
    }

    .active + div {
      background-color: red;
    }

    #four ~ div {
      background-color: salmon;
    }
  </style>
</head>

<body>
  <div class="active">1</div>
  <div>2</div>
  <div id="four">3
    <div>
      3.1
    </div>
  </div>
  <div>4<div>5</div>
    <div>6</div>
  </div>
  <div>7
    <div>8
      <div>9
        <div>10
        </div>
      </div>
    </div>
  </div>
</body>

</html>